<template>
  <div class="chat-message-list">
    <el-scrollbar style="width: 100%; height: 100%;">
      <div class="msg-list">
        <div class="msg-item" v-for="(item, index) in msgRecords" :key="index" @dblclick="handleMsgItemDblclick(item)">
          <div class="avatar-wrap">
            <img v-if="item.avatarUrl" :src="item.avatarUrl" alt="">
            <div class="avatar-icon" :class="{ orange: item.type === 'person', blue: item.type === 'group' }">
              <span>{{item.avatarStr}}</span>
            </div>
          </div>

          <div class="chat-info">
            <div class="username">
              {{item.label}}
              <span class="chat-time">{{item.lastSendTime}}</span>
            </div>
            <div class="chat-msg">{{item.content}}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <chat-panel ref="chatPanelRef"></chat-panel>
  </div>
</template>

<script>
import chatPanel from './chat-panel';

export default {
  name: 'chat-message-list',
  components: { chatPanel },
  data() {
    return {
      msgRecords: [],
    };
  },
  mounted() {
    this.msgRecords = [
      {
        id: 1,
        label: '张三三',
        type: 'person',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '之前说的那些情况是否已经解决？请回答下现在的情况怎么样？',
      },
      {
        id: 2,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '李一桐：那些情况是否已经解决',
      },
      {
        id: 3,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '那些情况是否已经解决',
      },
      {
        id: 4,
        label: '张三三',
        type: 'person',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '之前说的那些情况是否已经解决？请回答下现在的情况怎么样？',
      },
      {
        id: 5,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '李一桐：那些情况是否已经解决',
      },
      {
        id: 6,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '那些情况是否已经解决',
      },
      {
        id: 7,
        label: '张三三',
        type: 'person',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '之前说的那些情况是否已经解决？请回答下现在的情况怎么样？',
      },
      {
        id: 8,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '李一桐：那些情况是否已经解决',
      },
      {
        id: 8,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '那些情况是否已经解决',
      },
      {
        id: 10,
        label: '张三三',
        type: 'person',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '之前说的那些情况是否已经解决？请回答下现在的情况怎么样？',
      },
      {
        id: 11,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '李一桐：那些情况是否已经解决',
      },
      {
        id: 12,
        label: '快捷会商群1',
        type: 'group',
        avatarUrl: '',
        lastSendTime: '10:50',
        content: '那些情况是否已经解决',
      },
    ];

    this.setAvatarUrl(this.msgRecords);
  },
  methods: {
    setAvatarUrl(list) {
      list.forEach(item => {
        if (!item.avatarUrl) {
          switch (item.type) {
            case 'person':
              item.avatarStr = item.label.substr(0, 1);
              break;
            case 'group':
              item.avatarStr = '群';
              break;
          }
        }
      });
    },

    /**
     * 双击直接弹出聊天面板
     */
    handleMsgItemDblclick(msgItem) {
      this.$refs.chatPanelRef.open(JSON.parse(JSON.stringify(msgItem)));
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-message-list {
  width: 100%;
  height: 100%;
  color: #fff;

  .msg-list {
    width: 100%;
    height: 100%;
    padding-right: 12px;

    .msg-item {
      display: flex;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid rgba(35, 149, 255, 0.25);
      padding: 12px 0;
      user-select: none;

      &:hover {
        background: rgba(0, 155, 236, 0.25);
      }

      .avatar-wrap {
        flex: 0 1 auto;
        width: 40px;
        height: 40px;

        .avatar-icon {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          position: relative;

          > span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          &.orange {
            background: #FB9623;
          }

          &.blue {
            background: #04AFFF;
          }
        }
      }

      .chat-info {
        flex: 0 1 auto;
        width: calc(100% - 40px);
        padding-left: 12px;

        .username {
          font-size: 14px;
          padding: 6px 0;
          position: relative;

          .chat-time {
            position: absolute;
            right: 0;
          }
        }

        .chat-msg {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          text-overflow: ellipsis;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
